<template>
	<view class="record">
		<view class="top" v-if="model === 'qt'">
			<u-tabs :list="tabList" @click="changeTab" :activeStyle="{color: '#4611db'}" lineColor="#4611db" :scrollable="false" :itemStyle="{padding: '20rpx 50rpx'}"></u-tabs>
		</view>
		<view class="center" :class="{else: model === 'qt'}">
			<scroll-view scroll-y="true" class="h-100" :scroll-top="scrollTop" :scroll-with-animation="true" @scrolltolower="scrolltolower">
				<view v-for="(item, key) in info" :key="key" class="list">
					<view class="t">
						<text class="user">{{item.name}}</text>
						<text class="time">{{item.time}}</text>
					</view>
					<view class="type" v-if="model === 'qt'">
						<u-tabs :list="typeList" @click="changeType" lineColor="#4611db"></u-tabs>
					</view>
					<view class="c">
						<view class="item" v-for="(x, y) in typeList.filter(v => v.active)[0].children[key]" :key="b">
							<view class="label">{{x.name}}:</view>
							<view class="value">
								<scroll-view v-if="x.type === 'upload'" scroll-x="true" class="w-100">
									<view class="v">
										<u--image @click="previewImg(x.value, b)" v-for="(a, b) in x.value" :key="b" :showLoading="true" :src="a" width="50px" height="50px"></u--image>
									</view>
								</scroll-view>
								<text v-else>{{x.value}}</text>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :height="30" :marginTop="0" :marginBottom="0" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import common from '../../common/js/common.js'
	export default{
		data() {
			return {
				model: '',
				apiList: {
					rc: '/manage/anony/app/daily-check-list',
					sb: '/manage/anony/app/project-patrol-list',
					qt: '/manage/anony/app/other-list-detail'
				},
				tabList: [
					{name: '汛前检查', active: true, type: 1},
					{name: '特别检查', active: false, type: 2},
					{name: '年度检查', active: false, type: 3},
				],
				typeList: [
					{name: '土建工程', active: true, children: []},
					{name: '闸门', active: false, children: []},
					{name: '启闭机', active: false, children: []},
					{name: '电气设备及自动监控系统', active: false, children: []},
					{name: '工程安全设施', active: false, children: []},
					{name: '其他', active: false, children: []},
				],
				info: [],
				scrollTop: 0,
				size: 10,
				current: 1,
				status: 'loadmore'
			}
		},
		onLoad(options) {
			this.model = options.key
			this.init()
		},
		methods: {
			init() {
				common.request({
					url: this.$serverUrl + this.apiList[this.model],
					type: 'post',
					params: this.model === 'qt' ? {
						type: this.tabList.filter(v => v.active)[0].type,
						current: this.current,
						size: this.size
					} : {
						current: this.current,
						size: this.size
					}
				}, res => {
					this.status = res.list.length < this.size ? 'nomore' : 'loadmore'
					this.info = this.current === 1 ? res.list : this.info.concat(res.list)
					if (this.current === 1)this.typeList.forEach(v => v.children = [])
					if (this.model === 'rc') {
						this.info.forEach(v => {
							v.name = this.$store.state.typesList[0].name
							v.time = v.checkTime
							let arr = JSON.parse(JSON.stringify(this.$store.state.typesList[0].form))
							arr.forEach(a => {
								a.value = v[a.prop.split('.')[1]]
							})
							this.typeList[0].children.push(arr)
						})
					} else if (this.model === 'sb') {
						this.info.forEach(v => {
							v.name = this.$store.state.typesList[1].name
							v.time = v.dateTime
							let arr = JSON.parse(JSON.stringify(this.$store.state.typesList[1].form))
							arr.forEach(a => {
								a.value = a.type === 'upload' ? (v[a.prop] ? v[a.prop].split(',') : []) : v[a.prop]
							})
							this.typeList[0].children.push(arr)
						})
					} else if (this.model === 'qt') {
						this.info.forEach(v => {
							v.name =  this.tabList.filter(v => v.active)[0].name
							v.time = v.floodCheckTime
							let arr = JSON.parse(JSON.stringify(this.$store.state.commonForm.map(a => a.form)))
							arr.forEach((a, j) => {
								a.forEach(b => {
									let _k = b.prop.split('.')
									b.value = v[_k[0]][_k[1]]
								})
								this.typeList[j].children.push(a)
							})
						})
					}
				})
			},
			previewImg(data, k) {
				uni.previewImage({
					urls: data,
					current: k
				})
			},
			changeTab(row) {
				this.tabList.forEach((v, i) => {
					v.active = i === row.index
				})
				this.scrollTop = 0
				this.current = 1
				this.init()
			},
			changeType(row) {
				this.typeList.forEach((v, i) => {
					v.active = i === row.index
				})
			},
			scrolltolower() {
				if (this.status !== 'nomore') {
					this.status = 'loading'
					this.current++
					this.init()
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../common/style/main.less';
	.record {
		height: 100%;
		display: flex;
		flex-flow: column;
		.top {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.center {
			flex: 1;
			max-height: 100%;
			&.else {
				max-height: calc(100% - 100rpx);
			}
			.list {
				display: inline-block;
				margin: 20rpx 20rpx 0 20rpx;
				border: 2rpx solid #eeeeee;
				border-radius: 10rpx;
				overflow: hidden;
				width: calc(100% - 40rpx);
				.t {
					border-bottom: 2rpx solid #eeeeee;
					padding: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.user {
						font-weight: bold;
						font-size: 36rpx;
					}
					.time {
						font-size: 30rpx;
						color: #cccccc;
					}
				}
				.c {
					padding: 20rpx;
					display: grid;
					grid-template-columns: repeat(2, 50%);
					grid-gap: 20rpx;
					.item {
						display: flex;
						font-size: 28rpx;
						.label {
							color: #cccccc;
							margin-right: 10rpx;
						}
						.value {
							min-width: 100rpx;
							max-width: calc(100% - 130rpx);
							.v {
								white-space: nowrap;
								display: flex;
								/deep/ .u-image {
									margin-right: 20rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>